<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用样式</title>
    <!-- 
        css常用样式
           1. 字体样式
               font-size   font-weigth font-family  font-style

           2. 文本样式
               color  text-align  text-indent text-decoration line-heigth

           3. 背景样式
                background-color  background-image  background-postion  background-reapet
                background-size

           4. 列表
               list-style:none
    
           5. 超链接
              a:hover
    
    -->
    <style>
        p{
            font-size: 28px;
            font-weight: 700;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
       
            color:red;
            text-align: center;
            text-decoration: underline;
        }

        div{
            width: 400px;
            height: 600px;
            background-color: pink;
            background-image: url(../img/22.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        ul{
            list-style: none;
        }

        input[type]{
            text-indent: 5px;
        }
    </style>
</head>

<body>
    <p>内容</p>

    <div></div>

    <ul>
        <li>元素一</li>
        <li>元素二</li>
        <li>元素三</li>
        <li>元素四</li>
        <li>元素五</li>
    </ul>

    <input type="text" placeholder="请输入内容">
</body>

</html>